{% extends "map/index.html"%}
{% load staticfiles %}
{% block window %}
<html>
<head>
	<meta http-equiv="Content-Type" content="text/event-stream; charset=utf-8" />
</head>
<body>
<div class="container-fluid">
    <div class="col-md-2">
        <div class="alert alert-warning" role="alert">
        <h4>详细信息界面:</h4>
        对应船只，对应引擎，对应监控仪的实时信息。<br/>主要包含船速、水温、油温、以及监控仪得到的具有表现价值的所有数据。
        </div>
    </div>
    <div class="col-md-10">
    {% for data in engine_monitor %}
    	<div class="row">
    		<div class="col-md-8" id="{{ data.monitor_name }}_div" style="height: 46%"></div>
    		<div class="col-md-4" id="result_left">
    			<table id="{{ data.monitor_name }}_table" class="table">
    				<tr>
                        <th>速度</th>
    					<th>海水温度</th>
    					<th>滑油进机温度</th>
    					<th>滑油出机温度</th>
                        <th>others</th>
    				</tr>
    				<tr>
                        <td id="{{ data.monitor_name }}_speed" class="info">{{ data.monitor_data.speed }}KM/H</td>
    					<td id="{{ data.monitor_name }}_water_temperature"class="danger">{{ data.monitor_data.water_temperature }}℃</td>
    					<td id="{{ data.monitor_name }}_oil_temperature" class="success">{{ data.monitor_data.oil_temperature }}℃</td>
    					<td class="info">{{ data.monitor_data.oil_temperature }}℃</td>
                        <td class="info">{{ data.monitor_data.others.speed }}</td>
    				</tr>
    			</table>
    		</div>
    	</div>
    {% endfor %}
    </div>
</div>
<script type="text/javascript">
function get_option(subtitle){
    option = {
        title:{
            text:"发动机信息",
            subtext: subtitle+"(监控仪名：引擎名：船舶名)",
        },
        tooltip : {
            formatter: "{a} <br/>{c} {b}"
        },
        series : [
            {
                name: '速度',
                type: 'gauge',
                z: 3,
                min: 0,
                max: 220,
                splitNumber: 11,
                radius: '50%',
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 10
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length: 15,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length: 20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                title : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder',
                        fontSize: 20,
                        fontStyle: 'italic'
                    }
                },
                detail : {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data:[{value: 40, name: 'km/h'}]
            },
            {
                name: '转速',
                type: 'gauge',
                center: ['20%', '55%'],    // 默认全局居中
                radius: '35%',
                min:0,
                max:7,
                endAngle:45,
                splitNumber:7,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    length:12,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                splitLine: {           // 分隔线
                    length:20,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:5
                },
                title: {
                    offsetCenter: [0, '-30%'],       // x, y，单位px
                },
                detail: {
                    textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontWeight: 'bolder'
                    }
                },
                data:[{value: 1.5, name: 'x1000 r/min'}]
            },
            {
                name: '油表',
                type: 'gauge',
                center: ['77%', '50%'],    // 默认全局居中
                radius: '25%',
                min: 0,
                max: 2,
                startAngle: 135,
                endAngle: 45,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    splitNumber: 5,
                    length: 10,        // 属性length控制线长
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: 'auto'
                    }
                },
                axisLabel: {
                    formatter:function(v){
                        switch (v + '') {
                            case '0' : return 'E';
                            case '1' : return 'Gas';
                            case '2' : return 'F';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:2
                },
                title : {
                    show: false
                },
                detail : {
                    show: false
                },
                data:[{value: 0.5, name: 'gas'}]
            },
            {
                name: '水表',
                type: 'gauge',
                center : ['77%', '50%'],    // 默认全局居中
                radius : '25%',
                min: 0,
                max: 2,
                startAngle: 315,
                endAngle: 225,
                splitNumber: 2,
                axisLine: {            // 坐标轴线
                    lineStyle: {       // 属性lineStyle控制线条样式
                        width: 8
                    }
                },
                axisTick: {            // 坐标轴小标记
                    show: false
                },
                axisLabel: {
                    formatter:function(v){
                        switch (v + '') {
                            case '0' : return 'H';
                            case '1' : return 'Water';
                            case '2' : return 'C';
                        }
                    }
                },
                splitLine: {           // 分隔线
                    length: 15,         // 属性length控制线长
                    lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto'
                    }
                },
                pointer: {
                    width:2
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                data:[{value: 0.5, name: 'gas'}]
            }
        ]
    };
    return option;
}
var dom_names = [];
var charts = [];
var options = [];
var ship_id = [];
</script>
{% for x in engine_monitor %}
<script type="text/javascript">
    if('{{ x.msg }}'=='success'){
        dom_name = '{{ x.monitor_name }}_div';
        dom_names.push(dom_name);
        ship_id.push('{{ x.ship_id }}');
    }
    else{
        $.alert({
            title: '提醒!',
            content: "{{ x.msg }}",
            theme: 'material',
            animationSpeed: 300,
            autoClose: 'confirm|2000',
        });
    }

</script>
{% endfor %}
<script type="text/javascript">
for(var i=0;i<dom_names.length;i++)
{
    charts.push(echarts.init(document.getElementById(dom_names[i])));
    options.push(get_option(dom_names[i].split('_')[0]));
    charts[i].setOption(options[i]);
}
$(document).ready(function(){
            var url = '/map/events1/'+ship_id[0];
            var source = new EventSource(url);
            source.addEventListener("date", function(e) {
                show_data = JSON.parse(e.data);
                for(var j=0;j<show_data.length;j++){
                    show_data_json = JSON.parse(show_data[j])
                    var speed_id = show_data_json['monitor_name']+"_speed";
                    var water_temperature_id = show_data_json['monitor_name']+"_water_temperature";
                    var oil_temperature_id = show_data_json['monitor_name']+"_oil_temperature";
                    document.getElementById(speed_id).innerHTML=show_data_json['monitor_data'].speed+"KM/H";
                    document.getElementById(water_temperature_id).innerHTML=show_data_json['monitor_data'].water_temperature+"℃";
                    document.getElementById(oil_temperature_id).innerHTML=show_data_json['monitor_data'].oil_temperature+"℃";
                    options[j].series[0].data[0].value  = show_data_json['monitor_data'].speed;
                    options[j].series[1].data[0].value  = (Math.random()*7).toFixed(2) - 0;
                    options[j].series[2].data[0].value  = (Math.random()*2).toFixed(2) - 0;
                    options[j].series[3].data[0].value  = (Math.random()*2).toFixed(2) - 0;
                    charts[j].setOption(options[j],true);
                }
            });
});
</script>
</body>
</html>
{% endblock %}
